<template>
	<view class="content">
		<g-watermark/>
		<List :url="url" :list.sync="list" type='draftbox' @edit="_handleEdit" :isChecked.sync="isChecked"
			@delete="_handleDelete" @transmit="_handleTransmit"  @click="_handleEdit">
			<template v-slot:search>
				<view style="margin: 20rpx 0;">
					<u-row gutter="16">
						<u-col :span="3">
							<u-input type="select" input-align="right" placeholder="请选择" v-model="selectText" disabled
								@click="selectShow=true" :height="50" :placeholder-style="'font-size:28rpx'"
								:custom-style="{fontSize:'28rpx'}" />
						</u-col>
						<u-col :span="9">
							<u-search placeholder="搜索" :show-action="false" :input-style="{fontSize:'28rpx'}"
								:height="50" v-model="queryParam.what"></u-search>
						</u-col>
					</u-row>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;margin-top: 20rpx;">
					<u-button size="mini" :hover-class="'buttons'"
						:custom-style="{width:'200rpx',backgroundColor:'#0097ff',padding:'20rpx',border:'none',color:'#fff', fontSize:'32rpx'}"
						@click="search">查询</u-button>
				</view>
			</template>
			<template v-slot:content="{item}">
				<view class="list_item_info">
					<view class="list_item_info_item">
						<view class="title word-overflow">
							{{item.title}}
						</view>
						<view>
							{{item.receiversjsRealName}}
						</view>
					</view>
					<view class="list_item_info_item">
						<view>
						</view>
						<view class="send_time">
							{{item.rq}}
						</view>
					</view>
				</view>
			</template>
		</List>

		<view class="body_bottom" v-if="isChecked">
			<view @click="_handleCancel">
				取消
			</view>
			<view @click="_handleSelectAll">
				全选
			</view>
			<view @click="_handleDeleteBatch" style="color:red">
				删除
			</view>
		</view>
		<!-- 搜索 -->
		<u-select v-model="selectShow" mode="single-column" :list="kindList" @confirm="confirmSelect"
			@cancel="cancelSelect"></u-select>
	</view>
</template>

<script>
	import {
		postFormAction
	} from '@/utils/request.js';
	import List from '../common/list.vue'
	import listContent from "@/pages/mixin/listMixin.js";
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			List
		},
		mixins: [listContent],
		data() {
			return {
				url: {
					list: '/message_oa/listDraft',
					delete: '/message_oa/delToDustbin',
				},
				isGet: false,
				isChecked: false, //长按打开多选
				kindList: [{
						label: '标题',
						value: 'title',
					},
					{
						label: '内容',
						value: 'content',
					},
					{
						label: '发件人',
						value: 'sender',
					},
					{
						label: '未读消息',
						value: 'notreaded',
					},
				],
				queryParam: {
					action: 'search',
					kind: 'title',
					what: '',
				},
				// pageSize:9,
				selectText: '标题',
				selectShow: false,
				isPostFormAction: true,
			}
		},
		onLoad() {
			if (this.emailType == 2) {
				this.queryParam.isDept = true
			}
			this.getListData();
		},
		computed: {
			...mapState(["emailType"]),
		},
		//下拉刷新
		onPullDownRefresh() {
			// #ifdef MP-WEIXIN
			this.search();
			wx.stopPullDownRefresh();
			// #endif

			// #ifdef APP-ANDROID || H5
			uni.startPullDownRefresh();
			this.search();
			uni.stopPullDownRefresh();
			// #endif

			// #ifdef APP-IOS
			this.search();
			uni.stopPullDownRefresh();
			// #endif
		},
		methods: {
			_handleRefresh() {
				this.isChecked = false
				this.search()
			},
			search() {
				this.page = 1
				this.getListData();
			},
			_handleEdit(record) {
				uni.navigateTo({
					url: `/cmn/internalEmail/writebox/editMessage?type=draftbox&mainId=${record.id}`,
				});
			},
			//转发
			_handleTransmit(record) {
				uni.navigateTo({
					url: `/cmn/internalEmail/writebox/transmitMessage?mainId=${record.id}`,
				});
			},
			_handleDelete(record) {
				const that = this
				uni.showModal({
					title: "提示",
					content: "您确定删除么？",
					success: (res) => {
						if (res.confirm) {
							that.handleDelete(record.id);
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			//全选
			_handleSelectAll() {
				this.list.forEach(item => {
					item.checked = true
				})
				this.list = [...this.list]
			},
			//取消全选
			_handleCancel() {
				this.list.forEach(item => {
					item.checked = false
				})
				this.list = [...this.list]
				this.isChecked = false
			},
			//删除
			handleDelete(ids) {
				const that = this
				try {
					uni.showLoading({
						title: '删除中',
						mask: true
					});
					postFormAction(this.url.delete, {
						ids: ids,
					}).then((res) => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						that._handleRefresh();
					});
				} catch (e) {
					uni.hideLoading()
				} finally {
					uni.hideLoading()
				}
			},
			//批量删除
			_handleDeleteBatch() {
				let selectList = this.list.filter(item => item.checked);
				let checkes = selectList.map(item => item.id);
				if (checkes.length == 0) {
					uni.showToast({
						title: '请选择数据',
						icon: 'none'
					});
					return;
				}
				const ids = checkes.join(',');
				const that = this
				uni.showModal({
					title: "提示",
					content: "您确定删除么？",
					success: async (res) => {
						if (res.confirm) {
							that.handleDelete(ids)
						}
					}
				})
			},
			confirmSelect(e) {
				if (e && e.length) {
					this.selectText = e[0].label;
					this.queryParam.kind = e[0].value;
				}
			},
			//取消
			cancelSelect() {},
		}

	}
</script>

<style lang="less" scoped>
	.content {
		padding-bottom: 100rpx;

		.list_item_info {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding: 20rpx;
			border-bottom: 1px solid rgba(0, 0, 0, .1);

			&_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 20rpx;

				.title {
					flex: 1;
					white-space: normal;
					word-break: break-all;
					font-weight: bold;
				}

				.send_time,
				{
				color: #999;
			}
		}
	}

	.body_bottom {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
	}
	}
</style>